<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/index2.css">
    <link rel="stylesheet" href="../css/index3.css">
    <title>index</title>
</head>

<body>
    <div>
        <!-- 头部 -->
        <div class="head">
            <!-- logo + 导航 -->
            <div>
                <!-- logo -->
                <div class="logo">
                    <p>.ONETOEN</p>
                </div>
                <!-- 导航 -->
                <div class="nav">
                    <ul>
                        <li><a href="#">ABOUT US</a> /</li>
                        <li><a href="#">WORK</a> /</li>
                        <li><a href="#">SERVICES</a> /</li>
                        <li><a href="#">BLOG</a> /</li>
                        <li><a href="#">CAREERS</a> /</li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </div>
            </div>
            <div class="head_tit">
                <!-- 左边的字 -->
                <div class="head_left">
                    <p class="p1">.creatively</p>
                    <p class="p2">&nbsp;&nbsp;professional</p>
                </div>
                <!-- 右边的字 -->
                <div class="head_right">
                    <p class="p3">Fully responsive website mockup PSD</p>
                    <p class="p3">template. Free for commercial & presonal use.</p>
                    <p class="p3">Portfolio & Contact Pages included.</p>
                    <p class="a_btn" style="border:1px solid #ffffff;"><a href="#">SEE WORKS</a></p>
                </div>
            </div>
        </div>
        <!-- 主要内容 -->
        <div class="main">
            <div class="main_img">
                <!-- 左图 -->
                <div class="img_left">
                    <img src="../img/bg2.png" width="600px" height="470px">
                </div>
                <!-- 右边文字 -->
                <div id="context_rig" class="context_rig">
                    <div class="context">
                        <p class="context_p">PROIN AODALES EU MASSA</p>
                        <p class="context_p">VIATE PORTA</p>
                        <br>
                        <br>
                        <p class="context_p2">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed leo tellus.
                            Praesent nec vehicula ligula, non laoreet ligula.
                            Maecenas at massa eget orci porttitor semper.
                            Sed lobortis magna in faucibus commodo.
                            Ut purus odio, gravida sit amet laoreet at, dictum et urna. Sed egestas mauris tellus,
                            vitae
                            facilisis nisi pretium imperdiet.
                            Donec dapibus mi a mauris rhoncus, a vehicula nibh porttitor. Duis nisl magna, sodales vel
                            felis eu, luctus facilisis nibh.
                            Mauris placerat viverra lectus at ornare. Maecenas malesuada egestas consequat.
                            Donec et aliquam eros. Sed pulvinar nunc quis tristique condimentum.
                            Sed nec metus lorem.
                        </p>
                        <p class="a_btn"><a href="#">READ MORE</a></p>
                    </div>
                </div>
            </div>

            <div class="con_two">
                <div class="con_img">
                    <div class="con_two_tit">
                        <p class="con_two_tit_p">FEATURED WORKS</p>
                    </div>
                    <!-- 电脑 -->
                    <div class="imac">
                        <img src="../img/imac.png" width="600px" height="470px">
                    </div>
                    <!-- 手机 -->
                    <div class="phone">
                        <img src="../img/iphone 5c.png" width="120px">
                    </div>
                    <div class="con_two_btn">
                        <p class="a_btn">
                            <a href="#">SEE ALL WORKS</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="con_three">
                <div class="con_img">
                    <div class="con_two_tit">
                        <p class="con_two_tit_p">OUR SERVICES</p>
                    </div>
                    <div class="con_three_con">
                        <ul>
                            <li class="three_img">
                                <a href="#">
                                    <div class="three_div"><img src="../img/mobile.png"></div>
                                </a>
                            </li>
                            <li class="three_txt" style="background-image: url(../img/text\ bg1.png);background-position:0% 0%;">
                                <a href="#">
                                    <p>MOBILE<br />APPS</p>
                                </a>
                            </li>
                            <li class="three_img">
                                <div class="three_div"><a href="#"><img src="../img/browser.png"></a></div>
                            </li>
                            <li class="three_txt" style="background-image: url(../img/text\ bg2.png);background-position:0% 0%;">
                                <a href="#">
                                    <p>WEBSITE<br />DESIGN &<br />CODING</p>
                                </a>
                            </li>
                            <li class="three_img">
                                <div class="three_div"><a href="#"><img src="../img/icon.png"></a></div>
                            </li>
                            <li class="three_txt" style="background-image: url(../img/text\ bg3.png);background-position:0% 0%;">
                                <a href="#">
                                    <p>IDENTITY<br />CREATION</p>
                                </a>
                            </li>

                            <li class="three_txt_down" style="background-image: url(../img/text\ bg4.png);background-position:100% 100%;">
                                <a href="#">
                                    <p>BRAND<br />PROMTION</p>
                                </a>
                            </li>
                            <li class="three_img_down">
                                <a href="#">
                                    <div class="three_div"><img src="../img/megaphone .png"></div>
                                </a>
                            </li>
                            <li class="three_txt_down" style="background-image: url(../img/text\ bg5.png);background-position:100% 100%;">
                                <a href="#">
                                    <p>CRAPHIC<br />DESIGN</p>
                                </a>
                            </li>
                            <li class="three_img_down">
                                <a>
                                    <div class="three_div"><img src="../img/paint brush.png"></div>
                                </a>
                            </li>
                            <li class="three_txt_down" style="background-image: url(../img/text\ bg6.png);background-position:100% 100%;">
                                <a href="#">
                                    <p>MOTION<br />DYNAMICS</p>
                                </a>
                            </li>
                            <li class="three_img_down">
                                <a href="#">
                                    <div class="three_div"><img src="../img/movie tape.png"></div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="con_four">
                <div class="con_four_con">
                    <div class="four_text">
                        <div class="four_tit">
                            <p>AUOUT US</p>
                        </div>
                        <div class="four_txt">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Suspendisse sed leo tellus. Praesent nec vehicula ligula, non laoreet ligula.
                                Maecenas at massa eget orci porttitor semper. Sed lobortis magna in faucibus commodo.
                                Ut purus odio, gravida sit amet laoreet at, dictum et urna. Sed egestas mauris tellus,
                                vitae facilisis nisi pretium imperdiet. Donec dapibus mi a mauris rhoncus, a vehicula
                                nibh porttitor.
                            </p>
                        </div>
                    </div>
                    <div class="four_img">
                        <ul>
                            <li>
                                <div><img src="../img/Layer 8.png"></div>
                                <div class="four_choose">
                                    <ul>
                                        <li>joann henry doe
                                            <ul>
                                                <li><img src="../img/skype.png"></li>
                                                <li><img src="../img/dribbble.png"></li>
                                                <li><img src="../img/twitter.png"></li>
                                                <li><img src="../img/google plus.png"></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div><img src="../img/Layer 9.png"></div>
                                <div class="four_choose">
                                    <ul>
                                        <li>Christropher london
                                            <ul>
                                                <li><img src="../img/skype.png"></li>
                                                <li><img src="../img/dribbble.png"></li>
                                                <li><img src="../img/twitter.png"></li>
                                                <li><img src="../img/google plus.png"></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div><img src="../img/Layer 10.png"></div>
                                <div class="four_choose">
                                    <ul>
                                        <li>lovy puppy
                                            <ul>
                                                <li><img src="../img/skype.png"></li>
                                                <li><img src="../img/dribbble.png"></li>
                                                <li><img src="../img/twitter.png"></li>
                                                <li><img src="../img/google plus.png"></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="con_five">
                <div class="con_five_con">
                    <div class="five_tit">
                        <p>TESTIMONILS</p>
                    </div>
                    <div class="five_txt">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Suspendisse sed leo tellus. Praesent nec vehicula ligula, non laoreet ligula.
                            Maecenas at massa eget orci porttitor semper. Sed lobortis magna in faucibus commodo.
                            Ut purus odio, gravida sit amet laoreet at, dictum et urna. Sed egestas mauris tellus,
                            vitae facilisis nisi pretium imperdiet. Donec dapibus mi a mauris rhoncus, a vehicula nibh
                            porttitor.
                        </p>
                    </div>
                    <div class="five_down">
                        <p>John Henry Doe, ABC Company, St. Louis</p>
                    </div>
                </div>
            </div>

            <!-- 底部 -->
            <div class="footer">
                <div class="con_footer">
                    <div class="footer_up">
                        <div class="footer_tit">
                            <p>SUBCRIBE TO OUR NEWSLETTER</p>
                        </div>
                        <div class="footer_inp">
                            <div><input type="text"></div>
                            <div><input type="button" value="submit"></div>
                            <div class="foot_inp_prompt">
                                <p>ENETR YOU EMAIL ADDRESS</p>
                            </div>
                        </div>
                        <div class="footer_bot">
                            <p>.ONETOWN</p>
                        </div>
                        <div class="footer_img">
                            <ul>
                                <li><img src="../img/twitter.png"></li>
                                <li><img src="../img/facebook.png"></li>
                                <li><img src="../img/pinterest.png" width="40px"></li>
                                <li><img src="../img/linked in.png"></li>
                                <li><img src="../img/skype.png"></li>
                            </ul>
                        </div>
                    </div>
                    <div class="footer_down">
                        <div class="foot_nav">
                            <ul>
                                <li><a href="#">ABOUT US</a> /</li>
                                <li><a href="#">WORK</a> /</li>
                                <li><a href="#">SERVICES</a> /</li>
                                <li><a href="#">BLOG</a> /</li>
                                <li><a href="#">CAREERS</a> /</li>
                                <li><a href="#">CONTACT</a></li>
                            </ul>
                        </div>
                        <div class="tell">
                            <ul>
                                <li>email: info@domain.com</li>
                                <li>St. Louis: (123) 456 7890</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>